/*
 *
 * (c) Copyright Ascensio System Limited 2010-2018
 *
 * This program is freeware. You can redistribute it and/or modify it under the terms of the GNU 
 * General Public License (GPL) version 3 as published by the Free Software Foundation (https://www.gnu.org/copyleft/gpl.html). 
 * In accordance with Section 7(a) of the GNU GPL its Section 15 shall be amended to the effect that 
 * Ascensio System SIA expressly excludes the warranty of non-infringement of any third-party rights.
 *
 * THIS PROGRAM IS DISTRIBUTED WITHOUT ANY WARRANTY; WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR
 * FITNESS FOR A PARTICULAR PURPOSE. For more details, see GNU GPL at https://www.gnu.org/copyleft/gpl.html
 *
 * You can contact Ascensio System SIA by email at sales@onlyoffice.com
 *
 * The interactive user interfaces in modified source and object code versions of ONLYOFFICE must display 
 * Appropriate Legal Notices, as required under Section 5 of the GNU GPL version 3.
 *
 * Pursuant to Section 7 § 3(b) of the GNU GPL you must retain the original ONLYOFFICE logo which contains 
 * relevant author attributions when distributing the software. If the display of the logo in its graphic 
 * form is not reasonably feasible for technical reasons, you must include the words "Powered by ONLYOFFICE" 
 * in every copy of the program you distribute. 
 * Pursuant to Section 7 § 3(e) we decline to grant you any rights under trademark law for use of our trademarks.
 *
*/


/*******************************************************************************
    Page loader
*******************************************************************************/
/*.loader-page {
    background: url("images/loader_64.gif") no-repeat center center  transparent;
    width: 64px;
    height: 64px;
    position: absolute;
    top: 50%;
    margin-top: -32px;
    margin-left: 100px;
    left: 50%;
   
}*/
.loader-page {
    width: 50px;
    height: 180px;
    position: absolute;
    top: 50%;
    margin-top: -100px;
    margin-left: 75px;
    left: 50%;

    .text {
        display: inline-block;
        font-size: 14px;
        margin-left: 80px;
        margin-top: 125px;
        color: #888;
    }

    img {
        position: absolute;
        top: 102px;
        width: 64px;
        height: 64px;
    }
}
.romb {
    width: 40px;
    height: 40px;
    -ms-transform: rotate(135deg) skew(20deg, 20deg);
    -webkit-transform: rotate(135deg) skew(20deg, 20deg);
    -moz-transform: rotate(135deg) skew(20deg, 20deg);
    -o-transform: rotate(135deg) skew(20deg, 20deg);
    background: red;
    border-radius: 6px;
    animation: movedown 3s infinite ease;
    -moz-animation: movedown 3s infinite ease;
    -webkit-animation: movedown 3s infinite ease;
    -o-animation: movedown 3s infinite ease;
    -ms-animation: movedown 3s infinite ease;
    position: absolute;
}
    .romb.blue {
        background: #55bce6;
        z-index: 3;
        -webkit-animation-name: blue;
        -moz-animation-name: blue;
        -ms-animation-name: blue;
        -o-animation-name: blue;
        animation-name: blue;
    }
.romb.red {
    background: #de7a59;
    z-index:1;
    -webkit-animation-name: red;
        -moz-animation-name: red;
        -ms-animation-name: red;
        -o-animation-name: red;
        animation-name: red;
}
    .romb.green {
        background: #a1cb5c;
        z-index: 2;
        -webkit-animation-name: green;
        -moz-animation-name: green;
        -ms-animation-name: green;
        -o-animation-name: green;
        animation-name: green;
    }

@-webkit-keyframes red {
    0%   {top:120px; background: #de7a59;}
    10%   {top:120px; background: #F2CBBF;}
    14%   { background: #fff;  top:120px;}  
    15%   { background: #fff;  top:0;}  
    20%  {background: #E6E4E4; }
    30%  {background: #D2D2D2;}
    40% { top:120px; }  
    100% { top:120px; background: #de7a59;}    
}

@keyframes red {
   0%   {top:120px; background: #de7a59;}
    10%   {top:120px; background: #F2CBBF;}
    14%   { background: #fff;  top:120px;}  
    15%   { background: #fff;  top:0;}  
    20%  {background: #E6E4E4; }
    30%  {background: #D2D2D2;}
    40% { top:120px; }  
    100% { top:120px; background: #de7a59;}    
}



@-webkit-keyframes green {    
     0%   {top:110px; background: #a1cb5c;opacity:1;}
    10%   {top:110px; background: #CBE0AC; opacity:1;}
    14%   { background: #fff;  top:110px; opacity:1;} 
    15%   { background: #fff;  top:0;opacity:1;}   
    20%   {background: #ffffff; top:0; opacity:0;}
    25%  {background: #EFEFEF; top:0; opacity:1; }
    30%  {background:#E6E4E4; }
    70% { top:110px;}
    100% { top:110px; background: #a1cb5c;}    
}

@keyframes green {
     0%   {top:110px; background: #a1cb5c;opacity:1;}
    10%   {top:110px; background: #CBE0AC; opacity:1;}
    14%   { background: #fff;  top:110px; opacity:1;} 
    15%   { background: #fff;  top:0;opacity:1;}   
    20%   {background: #ffffff; top:0; opacity:0;}
    25%  {background: #EFEFEF; top:0; opacity:1; }
    30%  {background:#E6E4E4; }
    70% { top:110px;}
    100% { top:110px; background: #a1cb5c;}      
}
@-webkit-keyframes blue {
     0%   {top:100px; background: #55bce6;opacity:1;}
    10%   {top:100px; background: #BFE8F8; opacity:1;}
    14%   { background: #fff;  top:100px; opacity:1;} 
    15%   { background: #fff;  top:0;opacity:1;}  
    20%   {background: #ffffff; top:0; opacity:0;}
    25%  {background: #ffffff; top:0; opacity:0;}
    45%  {background: #EFEFEF; top:0;opacity:0,2;}
    100% { top:100px;background: #55bce6;}  
}

@keyframes blue {
     0%   {top:100px; background: #55bce6;opacity:1;}
    10%   {top:100px; background: #BFE8F8; opacity:1;}
    14%   { background: #fff;  top:100px; opacity:1;} 
    15%   { background: #fff;  top:0;opacity:1;}  
    20%   {background: #ffffff; top:0; opacity:0;}
    25%  {background: #ffffff; top:0; opacity:0;}
    45%  {background: #EFEFEF; top:0;opacity:0,2;}
    100% { top:100px;background: #55bce6;} 
}

.loader-page.static .romb {
    animation: none;
    -moz-animation: none;
    -webkit-animation: none;
    -o-animation: none;
    -ms-animation: none;
    -webkit-animation-name: none;
    -moz-animation-name: none;
    -ms-animation-name: none;
    -o-animation-name: none;
    animation-name: none;
}

.loader-page.static .romb.blue {
    top: 100px;
    background: #55bce6;
}

.loader-page.static .romb.red {
    top: 120px;
    background: #de7a59;
}

.loader-page.static .romb.green {
    top: 110px;
    background: #a1cb5c;
}